<!-- The ref attr used to find the swiper instance -->
<template>
	<section>
		<main class="banner-box">
			<div class="download clearfix tc banner-title" ref="download">
				<span class="lh40 fs14 white">期货交易我们更专业</span>
				<a
					:href="system==='ios' ? this.channelInfo.iosUrl : this.channelInfo.androidUrl"
					class="fr mr10 fs12 bgwhite red"
				>下载</a>
			</div>
			<div id="banner">
				<img :src="banner">
			</div>
			<!-- Optional controls -->
		</main>
	</section>
</template>
<script>
import { MessageBox, Toast } from 'mint-ui'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'

import 'swiper/dist/css/swiper.css'

// swiper options example:
export default {
	name: 'carrousel',
	components: {
		Swiper: swiper,
		SwiperSlider: swiperSlide
	},
	data() {
		return {
			swiperOption: {
				autoplay: {
					delay: 3500,
					stopOnLastSlide: false,
					disableOnInteraction: true
				},
				// effect: "flip",
				lazy: true,
				grabCursor: true,
				pagination: {
					el: '.swiper-pagination',
					dynamicBullets: true
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				},
				direction: 'horizontal'				
				// more Swiper configs and callbacks...
				// ...
			},
			banner : './static/new_img/banner.png',
			isIos: false,
			isNative: false
		}
	},
	// you can find current swiper instance object like this, while the notNextTick property value must be true
	// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
	computed: {
		swiper() {
			return this.$refs.mySwiper.swiper
		},
		...mapState(['channelInfo', 'banners', 'system'])
	},
	mounted() {
		//环境检测
		const agent = navigator.userAgent
		const isAndroid = agent.indexOf('Android') > -1 || agent.indexOf('Adr') > -1 //android终端
		const isIos = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
		const isIosNative = agent.toLowerCase().indexOf('safari') <= -1

		if (isIosNative) {
			this.$refs.download.style.display = 'none'
		}
		if (isIos) {
			this.isIos = true
		}
	},
	methods: {
		toDetail(item) {
			if (item.style == 'html') {
				this.$router.push({
					path: 'bannerDetail',
					query: {
						id: item.id
					}
				})
			} else if (item.style == 'h5') {
				this.$router.push({
					path: item.content
				})
			} else {
				Toast('轮播类型错误')
			}
		}
	}
}
</script>
<style scoped>
.download {
	line-height: 30px;
	height: 40px;
	position: relative;
	background-color: #f96d46;
}

.download span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.download a {
	width: 48px;
	border-radius: 4px;
	margin-top: 8px;
	line-height: 24px;
}

.swiper-wrapper {
	height: auto !important;
}

.swiper-pagination span.swiper-pagination-bullet {
	width: 5px;
	height: 3px;
	border-radius: 0;
}

.swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 14px;
}

#banner {
	width: 100%;
	overflow: hidden;
}

#banner img {
	display: block;
	height: auto;
	width: 100%;
}

#banner {
	min-height: 110px;
}
.banner-title{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
}
.banner-box{
	position:relative
}
</style>